<template>
  <div class="content">
    <div class="banner">
      <a href="#">
        <img src="@/assets/images/banner.png" />
        <div class="font">
          <p>{{ $t('orderDetail.title') }}</p>
        </div>
      </a>
    </div>
    <div class="main_form_box">
      <div class="m">
        <el-form ref="contactForm" :model="contactPerson" :rules="rules">
          <div class="item">
            <div class="head">
              <p>{{ $t('orderDetail.contactPerson') }}</p>
            </div>
            <div class="form">
              <div class="label">
                <p>{{ $t('orderDetail.name') }}</p>
                <el-form-item prop="name">
                  <el-input v-model="contactPerson.name" type="text" :placeholder="$t('orderDetail.namePlaceholder')" />
                </el-form-item>
              </div>
              <div class="label">
                <p>{{ $t('orderDetail.mobile') }}</p>
                <el-form-item prop="phone">
                  <el-input v-model="contactPerson.phone" type="text" :placeholder="$t('orderDetail.mobilePlaceholder')" />
                </el-form-item>
              </div>
              <div class="label">
                <p>{{ $t('orderDetail.email') }}</p>
                <el-form-item prop="email">
                  <el-input v-model="contactPerson.email" type="text" :placeholder="$t('orderDetail.emailPlaceholder')" />
                </el-form-item>
              </div>
              <div class="label">
                <p>{{ $t('orderDetail.note') }}</p>
                <el-form-item prop="notes">
                  <el-input style="margin-top: .12rem" v-model="contactPerson.notes" type="textarea" :placeholder="$t('orderDetail.notePlaceholder')" />
                </el-form-item>
              </div>
              <div class="label">
                <p>{{ $t('order.childs_count') }}</p>
                <el-form-item prop="childs_count">
                  <el-input v-model="contactPerson.childs_count" type="text" :placeholder="$t('order.childs_count')" />
                </el-form-item>
              </div>
            </div>
            <div class="rideo"  v-if="ship.code !== 'THREE_HOUR'">
              <p>{{ $t('orderDetail.divingQuestion') }}</p>
              <ul>
                <li :class="{ on: contactPerson.is_diving }" @click="contactPerson.is_diving = 1">
                  <span>{{ $t('orderDetail.yes') }}</span>
                  <div></div>
                </li>
                <li :class="{ on: !contactPerson.is_diving }" @click="contactPerson.is_diving = 0">
                  <span>{{ $t('orderDetail.no') }}</span>
                  <div></div>
                </li>
              </ul>
            </div>
            <div class="desc" v-if="ship.code !== 'THREE_HOUR' && contactPerson.is_diving">
              <p><span>*</span>
                {{ $t('orderDetail.divingNote') }}
                <el-link href="/Diver disclaimer.pdf" target="_blank">{{ $t('orderDetail.divingNoteLink') }}</el-link>
              </p>
              <el-upload
                  style="width: 100%"
                  class="updata"
                  action="/api/upload/file"
                  accept=".pdf"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="handleUploadSuccess"
                  :on-error="handleUploadError"
              >
                <img src="@/assets/images/data.png" />
                <span>{{ uploadStatus || $t('orderDetail.upload') }}</span>
              </el-upload>
            </div>
          </div>
        </el-form>
        <el-form :model="passengerForms" ref="passengerFormsRef">
          <div class="item">
            <div class="head">
              <p>{{ $t('orderDetail.passengerInformation') }}</p>
            </div>
            <div class="form">
              <div class="label" v-for="(item, index) in passengerForms" :key="index">
                <div class="passenger-header">
                  <p>{{ $t('order.passenger') }} {{ index + 1}}</p>
                  <el-button
                    type="text"
                    class="delete-btn"
                    @click="removePassenger(index)"
                    v-if="passengerForms.length > 1 && ship.code === 'Custom'"
                  >
                    <i class="el-icon-delete"></i>
                  </el-button>
                </div>
                <el-form-item :prop="'item.' + index + '.nickname'" required>
                  <el-input type="text" v-model="item.nickname" :placeholder="$t('orderDetail.passenger1Placeholder')" />
                </el-form-item>
              </div>
            </div>
            <div class="add-passenger" v-if="ship.code === 'Custom'">
              <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addPassenger"
              >
                {{ $t('order.addPassenger') }}
              </el-button>
            </div>
          </div>
        </el-form>
        <div class="item">
          <div class="head">
            <p>{{ $t('orderDetail.additionalInformation') }}</p>
          </div>
          <div class="rideo">
            <p>{{ $t('orderDetail.specialNeeds') }}</p>
            <ul>
              <li :class="{ on: contactPerson.has_special_needs }" @click="contactPerson.has_special_needs = 1">
                <span>{{ $t('orderDetail.yes') }}</span>
                <div></div>
              </li>
              <li :class="{ on: !contactPerson.has_special_needs }" @click="contactPerson.has_special_needs = 0">
                <span>{{ $t('orderDetail.no') }}</span>
                <div></div>
              </li>
            </ul>
          </div>
          <el-input v-if="contactPerson.has_special_needs === 1" style="margin-top: 20px" type="textarea" v-model="contactPerson.eat_remark" :placeholder="$t('orderDetail.specialNeedsPlaceholder')" />
        </div>
        <div class="item">
          <div class="rideo ons">
            <p>{{ $t('orderDetail.hearAboutUs') }}</p>
            <ul>
              <li v-for="(source, index) in sources" :key="index"
                  :class="{ on: contactPerson.source === source.value }"
                  @click="contactPerson.source = source.value">
                <div></div>
                <span>{{ $t(source.label) }}</span>
              </li>
            </ul>
          </div>
          <div class="rideo">
            <p>{{ $t('orderDetail.confirmationCall') }}</p>
          </div>
          <div class="rideo">
            <ul>
              <li :class="{ on: contactPerson.needs_confirmation }" @click="contactPerson.needs_confirmation = 1">
                <span>{{ $t('orderDetail.yes') }}</span>
                <div></div>
              </li>
              <li :class="{ on: !contactPerson.needs_confirmation }" @click="contactPerson.needs_confirmation = 0">
                <span>{{ $t('orderDetail.no') }}</span>
                <div></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="button">
          <div @click="$emit('back')">{{ $t('orderDetail.back') }}</div>
          <div class="on" @click="submitForm">{{ $t('orderDetail.next') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    passengerForms: {
      type: Array,
      required: true
    },
    ship: {
      type: Object,
      default: () => ({}),
      required: true
    }
  },
  data() {
    return {
      contactPerson: {
        name: '',
        phone: '',
        email: '',
        notes: '',
        eat_remark: '',
        childs_count: 0,
        is_diving: 0,
        has_special_needs: 0,
        needs_confirmation: 0,
        source: 'internet',
        diving_file: ''
      },
      uploadStatus: '',
      sources: [
        { value: 'internet', label: 'orderDetail.internetSearch' },
        { value: 'referral', label: 'orderDetail.referredBySomeone' },
        { value: 'facebook', label: 'orderDetail.facebook' },
        { value: 'instagram', label: 'orderDetail.instagram' },
        { value: 'travel', label: 'orderDetail.onlineTravelPlatforms' },
        { value: 'agents', label: 'orderDetail.travelAgentsOthers' }
      ],
      rules: {
        name: [
          { required: true, message: this.$t('order.nameRequired'), trigger: 'blur' },
        ],
        phone: [
          { required: true, message: this.$t('order.phoneRequired'), trigger: 'blur' },
          { pattern: /^[0-9+\-\s()]*$/, message: this.$t('order.phoneInvalid'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('order.emailRequired'), trigger: 'blur' },
          { type: 'email', message: this.$t('order.emailInvalid'), trigger: 'blur' }
        ],
        passengerName: [
          { required: true, message: this.$t('order.passengerNameRequired'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.contactForm.validate((valid) => {
        if (valid) {
          if (this.ship.code !== 'THREE_HOUR') {
            if (this.contactPerson.is_diving && !this.contactPerson.diving_file) {
              this.$message.error(this.$t('orderDetail.pleaseUploadDiving'))
              return
            }
          }
          if (this.passengerForms.some(item => item.nickname === '')) {
            this.$message.error(this.$t('order.passengerNameRequired'))
            return
          }
          this.$emit('proceedToPayment', {
            contactPerson: this.contactPerson,
            passengers: this.passengerForms
          })
        } else {
          this.$message.error(this.$t('orderDetail.formError'))
          return false
        }
      })
    },
    beforeUpload(file) {
      const isPDF = file.type === 'application/pdf'
      if (!isPDF) {
        this.$message.error(this.$t('orderDetail.pdfOnly'))
        return false
      }
      this.uploadStatus = this.$t('orderDetail.uploading')
      return true
    },
    handleUploadSuccess(response) {
      console.log('response',response)
      if (response.code === 200) {
        this.contactPerson.diving_file = response.data.url
        this.uploadStatus = this.$t('orderDetail.uploadSuccess')
        this.$message.success(this.$t('orderDetail.uploadSuccess'))
      }
    },
    handleUploadError() {
      this.uploadStatus = this.$t('orderDetail.uploadFailed')
      this.$message.error(this.$t('orderDetail.uploadFailed'))
    },
    addPassenger() {
      this.passengerForms.push({
        nickname: ''
      })
    },
    removePassenger(index) {
      this.passengerForms.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.rideo ul li {
  cursor: pointer;
}
.rideo {
  margin-top: 20px;
}

.rideo ul li.on {
  color: white;
}

.button div {
  cursor: pointer;
}
.updata .el-upload {
  width: 100%;
  height: 100%;
}
.form {
  .passenger-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .delete-btn {
      color: #f56c6c;
      padding: 0;
    }
  }

}

.add-passenger {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>
